<!doctype html>
	
<html lang="en">
	
<head>
	<meta charset="UTF-8">
		
	<title>State:Loading</title>

	<script type="text/javascript">
	
	window.addEventListener("load", eventWindowLoaded, false);
	
	function eventWindowLoaded () {
		loadImages();
		checkloading();
	}
	
	
	function loadImages () {
		loadCounter = 0;
		
		// LOADING SCREEN CANVAS
		var loadingCanvas = document.getElementById("Loading");
		context = loadingCanvas.getContext("2d");
		
		
		loadingImage = new Image();
		loadingImage.src = "menus/loading.png";
		loadingImage.onload = function () {
			loadCounter++;
		}
		
		
		
		// MENU CANVAS
		var menuCanvas = document.getElementById("Menu");
		context1 = menuCanvas.getContext("2d");
		
		
		menuImage = new Image();
		menuImage.src = "menus/bg.png";
		menuImage.onload = function () {
			loadCounter++;
		}
		
		titleImage = new Image();
		titleImage.src = "menus/title.png";
		titleImage.onload = function() {
			loadCounter++;
		}
		
		newGameButtonImage = new Image();
		newGameButtonImage.src = "menus/new_game_button.png";
		newGameButtonImage.onload = function() {
			loadCounter++;
		}
		
		helpButtonImage = new Image();
		helpButtonImage.src = "menus/help_button.png";
		helpButtonImage.onload = function() {
			loadCounter++;
		}
		
		creditsButtonImage = new Image();
		creditsButtonImage.src = "menus/credits_button.png";
		creditsButtonImage.onload = function() {
			loadCounter++;
		}
		
		
		
		// GAME SETTINGS CANVAS
		var gameSettingsCanvas = document.getElementById("GameSettings");
		context2 = gameSettingsCanvas.getContext("2d");
		
		
		bgImage = new Image();
		bgImage.src = "menus/bg.png";
		
		bgImage.onload = function() {
			loadCounter++;
		}
		
		settingsImage = new Image();
		settingsImage.src = "menus/settings.png";
		settingsImage.onload = function(){
			loadCounter++;
		}
		
		mainMenuButton = new Image();
		mainMenuButton.src = "menus/main_menu_button.png";
		mainMenuButton.onload = function() {
			loadCounter++;
		}
		
		startButtonImage = new Image();
		startButtonImage.src = "menus/start.png";
		startButtonImage.onload = function(){
			loadCounter++;
		}
		
		
		
		// GAME LEVEL CANVAS
		var gameCanvas = document.getElementById("Game");
		context3 = gameCanvas.getContext("2d");
		
		bgImage1 = new Image();
		bgImage1.src = "levels/dirt/bg.png";
		bgImage1.onload = function() {
			loadCounter++;
		}
		
	        levelImage = new Image();
	        levelImage.src = "levels/dirt/level.png";
	        levelImage.onload = function () {
	                loadCounter++;
	        }

		fgImage = new Image();
		fgImage.src = "levels/dirt/fg.png";
		fgImage.onload = function() {
			loadCounter++;
		}
		
		missile = new Image();
		missile.src = "levels/dirt/missile.png";
		missile.onload = function() {
			loadCounter++
		}
		
		blueworm = new Image();
		blueworm.src = "levels/dirt/blueworm.png";
		missile.onload = function() {
			loadCounter++
		}
		
		redworm = new Image();
		redworm.src = "levels/dirt/redworm.png"
		redworm.onload = function() {
			loadCounter++
		}
		
		interfaceImage = new Image();
		interfaceImage.src = "levels/dirt/interface.png";
		interfaceImage.onload = function() {
			loadCounter++;
		}
		
		
		
		// HELPSCREEN CANVAS
		var helpCanvas = document.getElementById("Help");
		context4 = helpCanvas.getContext("2d");
		
		
		helpImage = new Image();
		helpImage.src = "menus/help.png";
		helpImage.onload = function(){
			loadCounter++;
		}
		
		nextButtonImage = new Image();
		nextButtonImage.src = "menus/next.png";
		nextButtonImage.onload = function() {
			loadCounter++;
		}
		
		previousButtonImage = new Image();
		previousButtonImage.src = "menus/previous.png";
		previousButtonImage.onload = function() {
			loadCounter++;
		}
		
		
		
		// CREDITS SCREEN CANVAS
		var creditsCanvas = document.getElementById("Credits");
		context5 = creditsCanvas.getContext("2d");
		
		
		creditsImage = new Image();
		creditsImage.src = "menus/credits.png";
		creditsImage.onload = function() {
			loadCounter++;
		}
	}
	

	function checkloading() {
		if (loadCounter >= 19) {
			drawEverything();
		} else {
			setTimeout(checkloading,20);
		}
	}
	
	
	function drawEverything () {
		
		context.drawImage(loadingImage, 0, 0);
		
	
		context1.drawImage(menuImage, 0, 0);
		context1.drawImage(titleImage, 100, 40);
		context1.drawImage(newGameButtonImage, 200, 250);
		context1.drawImage(helpButtonImage, 250, 300);
		context1.drawImage(creditsButtonImage, 220, 350);
		
		
		// GAME SETTINGS CANVAS
		context2.drawImage(bgImage, 0, 0);
		context2.drawImage(titleImage, 100, 40);
		context2.drawImage(settingsImage, 100, 180);
		context2.drawImage(mainMenuButton, 200, 430);
		context2.drawImage(startButtonImage, 520, 440);
		
		
		// GAME LEVEL CANVAS
		context3.drawImage(bgImage1, -200, -150);
		context3.drawImage(levelImage, -200, -150);
	        context3.drawImage(fgImage, -200, -150);
		context3.drawImage(blueworm, 100, 155);
		context3.drawImage(redworm, 390, 238);
		context3.drawImage(missile, 280, 150);
		context3.drawImage(interfaceImage, 10, 14);
		
		
		// HELPSCREEN CANVAS
		context4.drawImage(bgImage, 0, 0);
		context4.drawImage(titleImage, 100, 40);
		context4.drawImage(helpImage, 30, 180);
		context4.drawImage(mainMenuButton, 230, 430);	
		context4.drawImage(nextButtonImage, 520, 430);
		context4.drawImage(previousButtonImage, 50, 430);
		
		
		// CREDITS SCREEN CANVAS
		context5.drawImage(bgImage, 0, 0);
		context5.drawImage(titleImage, 100, 40);
		context5.drawImage(creditsImage, 20, 180);
		context5.drawImage(mainMenuButton, 200, 430)
					
		}
		
	
	</script>
</head>

<body>
	<div style="width: 700px; margin: auto;">
		
		<canvas id="Loading" width="640px" height="480px"> YOUR BROWSER DOES NOT SUPPORT HTML5! </canvas>
	
		<canvas id="Menu" width="640px" height="480px"> YOUR BROWSER DOES NOT SUPPORT HTML5! </canvas>
		
		<canvas id="GameSettings" width="640px" height="480px"> YOUR BROWSER DOES NOT SUPPORT HTML5! </canvas>
		
		<canvas id="Game" width="640px" height="480px"> YOUR BROWSER DOES NOT SUPPORT HTML5! </canvas>
		
		<canvas id="Help" width="640px" height="480px"> YOUR BROWSER DOES NOT SUPPORT HTML5! </canvas>
		
		<canvas id="Credits" width="640px" height="480px"> YOUR BROWSER DOES NOT SUPPORT HTML5! </canvas>
	</div>
</body>

</html>
